<template>
  <view 
    class="fu-grid"
    :class="{ 
      'fu-grid--border': border,
      'fu-grid--square': square
    }"
    :style="{ 
      paddingLeft: gutter ? `${gutter}rpx` : null
    }"
  >
    <slot></slot>
  </view>
</template>

<script>
/**
 * fu-grid 宫格组件
 * @description 用于展示网格布局内容
 * @property {Number} columnNum - 列数
 * @property {Boolean} border - 是否显示边框
 * @property {Boolean} square - 是否为正方形格子
 * @property {Number} gutter - 格子间隔
 */
export default {
  name: 'fu-grid',
  props: {
    columnNum: {
      type: Number,
      default: 4
    },
    border: {
      type: Boolean,
      default: true
    },
    square: {
      type: Boolean,
      default: false
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  provide() {
    return {
      grid: this
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-grid {
  display: flex;
  flex-wrap: wrap;
  
  &--border {
    &::after {
      content: '';
      position: absolute;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: left top;
      border: 2rpx solid var(--fu-border-color);
      pointer-events: none;
    }
  }
  
  &--square {
    position: relative;
  }
}
</style> 